<template>
	<div id="login" class="clear">
		<div id="imgBox">
			<img :src="imgSrc" alt="">
		</div>
		<div id="loginBox">
			<h2>餐饮管理系统登录界面</h2>
			<div id="formBox">
			<el-form :label-position="lposition" :model="formTable" label-width="80px">
  			<el-form-item 
  			label="用户名:" 
  			>
    		<el-input
  					placeholder="请输入员工编号"
  					v-model="formTable.inUser"
  					clearable
  					style="width: 260px"
  					>
			</el-input>
  			</el-form-item>
  			<el-form-item label="密码:">
    		<el-input
  					placeholder="请输入密码"
  					v-model="formTable.inPwd"
 					clearable
 					show-password
 					style="width: 260px"
 					>
					</el-input>
  			</el-form-item>
  			<el-form-item>
    		<el-button type="primary" @click="login">登录</el-button>
    		<el-button @click="reset">取消</el-button>
  			</el-form-item>
			</el-form>
			</div>	
		</div>
	</div>
</template>




<script>
	import {mapActions} from 'vuex'
	export default{
		name:'login',
		data(){
			return{
				imgSrc:require('@/assets/images/timg.jpg'),
				formTable:{
					inUser:'',
					inPwd:'',
				},
				lposition:'right',
				// rules:{
				// 	inUser:{ required: true, message: '用户名不能为空！', trigger: 'blur' },
				// 	inPwd:{ required: true, message: '密码不能为空！', trigger: 'blur' },
				// }
			}
		},
		methods:{
			...mapActions(['actLogin']),
			login(){
				if(this.formTable.inUser && this.formTable.inPwd){
					let obj = {
						number:this.formTable.inUser,
						password:this.formTable.inPwd
					}
					this.actLogin(obj).then(res=>{
						if(res.code===200){
							// console.log(res.permissions)
							if(res.per_id===7){
								this.$router.push('/index1')
							}else{
								this.$router.push('/index2')
							}
						}else{
							this.$message({
          						showClose: true,
          						message: '请输入正确的用户名或密码!',
          						type: 'error'
        					})
						}
					})
				}else{
					this.open()
				}
			},
			reset(){
				this.formTable.inUser = ''
				this.formTable.inPwd = ''
			},
			open(){
				 this.$message({
          			showClose: true,
          			message: '请输入正确的用户名或密码!',
          			type: 'error'
        		})
			}
		}
	}
</script>
<style scoped lang="less">
	#login{
		width: 100%;
		height: 100%;
		// background-color: rgba(185,185,185,0.5);
		#imgBox{
			width: 70%;
			height: 580px;
			line-height: 580px;
			float: left;
			img{
				width: 100%;
				height: 80%;
				display: inline-block; 
				vertical-align: middle;
			}
		}
		#loginBox{
			width: 29%;
			height: 100%;
			float: left;
			text-align: center;
			box-shadow: 0px 0px 5px #888888;
			h2{
				padding-top: 30px;
			}
			#formBox{
				padding-top:120px;
			}
		}
		
	}
	.clear:after{
		content: '';
		display:block;
		clear: both;
	}
</style>
